<script setup lang="ts">
  import { defineEmits, defineProps, Ref, ref } from 'vue';
  import MyImportFile from '@/components/my/MyImportFile.vue';
  import { del } from './{{kebab_case}}.api';
  import { Modal } from '@arco-design/web-vue';

  const emits = defineEmits([
    'add',
    'search',
    'update:rowSelection',
    'update:selectedKeys',
  ]);
  const searchValue = ref('');
  const importFileRef: Ref = ref<InstanceType<typeof MyImportFile>>();
  const props = defineProps<{
    selectedKeys: [];
    rowSelection: object;
  }>();
  const onSearch = () => {
    searchValue.value = '';
    emits('search', {});
  };
  const onChange = (val: any) => {
    emits('search', { search: val });
  };
  const onAdd = () => {
    emits('add');
  };
  const onselect = () => {
    importFileRef.value?.init();
  };
  const showSelect: Ref = ref(false);
  const bulkOperations = () => {
    showSelect.value = !showSelect.value;
    if (showSelect.value) {
      emits('update:rowSelection', {
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      });
    } else {
      emits('update:selectedKeys', []);
      emits('update:rowSelection', undefined);
    }
  };
  const bulkOperationsSelect = () => {
    Modal.confirm({
      title: '确定要删除这些用户吗？',
      content: '删除后不可恢复',
      onOk: async () => {
        await del(props.selectedKeys);
        showSelect.value = false;
        emits('search', {});
        emits('update:selectedKeys', []);
        emits('update:rowSelection', undefined);
      },
    });
  };
</script>

<template>
  <div class="query-box">
    <Breadcrumb />
    <a-space>
      <icon-refresh size="21" style="cursor: pointer" @click="onSearch" />
      <a-divider direction="vertical" />
      <a-mention
        v-model="searchValue"
        placeholder="请输入{{get_like_link_columns_comm(columns)}}"
        :style="{ width: '220px' }"
        allow-clear
        @change="onChange"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-mention>

      <a-dropdown-button @select="bulkOperationsSelect">
        <span @click="bulkOperations">
          批量操作
          <span v-if="props.selectedKeys.length">({% raw %}{{ props.selectedKeys.length }}{% endraw %})</span>
        </span>
        <template #icon>
          <icon-down />
        </template>
        <template #content>
          <a-doption v-if="showSelect">批量删除</a-doption>
          <a-doption>导出全部</a-doption>
        </template>
      </a-dropdown-button>
      <a-dropdown-button type="primary" @select="onselect">
        <span @click="onAdd">新增</span>
        <template #icon>
          <icon-down />
        </template>
        <template #content>
          <a-doption>导入数据</a-doption>
        </template>
      </a-dropdown-button>
      <slot />
    </a-space>
    <MyImportFile
      ref="importFileRef"
      :render-data="[
        { name: '用户名', value: '必填、长度3～50' },
        { name: '真实姓名', value: '必填、长度3～50' },
      ]"
    />
  </div>
</template>

<style scoped lang="less"></style>
